'use strict';
import React from "react";
import {View, Text, ScrollView, StyleSheet, Animated, Image, TouchableOpacity} from "react-native";
import ToolBar from "../Components/ToolBar";
import BottomInputText from "../Components/BottomInputText";
import FoundDetailsListView from "../Components/FoundDetailsListView";
import {_renderAvatarHead} from "../Utils/ViewUtils";
import BottomShareView from "../Components/BottomShareView";
import Global from "../Commom/GlobalConst";
import PostCommentPage from "../Pages/PostCommentPage";
import FoundAPIService from "../Commom/FoundAPIService";
import RegisteredContainer from '../Containers/RegisteredContainer';
const styles = StyleSheet.create({
    container: {flex: 1},
    questionBox: {
        padding: 10,
        marginBottom: 1,
        backgroundColor: 'white'
    },
    questionContent: {
        marginTop: 5,
        marginBottom: 5,
        color: Global.FontColor.DimGray,
        fontSize: 16,
        lineHeight: 28,
    },
    rowBox: {
        padding: 10,
        flexDirection: 'row',
        justifyContent: 'space-around',
        alignItems: 'center',
        backgroundColor: 'white',
        marginBottom: 15,
    },
    fontSize12: {
        fontSize: 12,
        color: Global.FontColor.LightGrey,
    },
});

/**
 *  有问必答详情
 */
class QuestionDetailsPage extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            paddingBottom: new Animated.Value(0),
            data: {},
            commentList: [],
        };
    }

    componentDidMount() {
        let id = this.props.ID;
        FoundAPIService.questionAnswerDetails(id).then((ret)=> {
            this.setState({
                commentList: ret.commemt_list,
                data: ret,
            });
        }).catch((err)=> {

        });
    }

    refreshComments() {
        let id = this.props.ID;
        FoundAPIService.questionAnswerDetails(id).then((ret)=> {
            this.setState({
                commentList: ret.commemt_list,
            });
        }).catch((err)=> {

        });
    }

    _KeyboardDidShow(height) {
        Animated.timing(
            this.state.paddingBottom,
            {
                toValue: height,
                duration: 50,
            }
        ).start();
    }

    _KeyboardDidHide() {
        Animated.timing(
            this.state.paddingBottom,
            {
                toValue: 0,
                duration: 50,
            }
        ).start();
    }
    goLoginPage(){
        this.props.navigator.push({
            id: 'RegisteredContainer',
            component: RegisteredContainer,
            passProps: {},
        });
    }
    comment() {
        this.props.navigator.push({
            id: 'PostCommentPage',
            component: PostCommentPage,
            passProps: {
                id: this.props.ID
            },
        });
    }




    render() {
        return (
            <Animated.View style={[styles.container, {paddingBottom: this.state.paddingBottom}]}>
                <ToolBar leftFunc={()=> this.props.navigator.pop()} title="有问必答" rightFunc={()=> {
                    this.shareView.showShareView();
                }}/>
                <ScrollView style={{
                    backgroundColor: '#F2F3F5'
                }}>
                    {_renderAvatarHead(this.state.data)}
                    <View style={styles.questionBox}>
                        <Text style={styles.fontSize12}>问题</Text>
                        <Text style={styles.questionContent}>{this.state.data.content}</Text>
                    </View>
                    {this.state.commentList.length > 0 ?
                        <View style={{flexDirection: 'row',alignItems: 'center',marginTop:10,padding: 10,paddingLeft: 15, backgroundColor: 'white',borderColor: '#F2F3F5',borderBottomWidth: 1,
                        }}>
                            <Image style={{width: 15,height: 15,marginRight: 10,resizeMode: 'contain'}}
                                   source={require('../../Image/icon_gray_comment.png')}
                            />
                            <Text style={{color: '#333', fontSize: 16}}>点评</Text>
                        </View>
                        : null}
                    {this.state.commentList.length > 0 ?
                        <FoundDetailsListView commentList={this.state.commentList}/> : null}
                </ScrollView>
                <BottomInputText
                             keyboardDidShow={(h) => this._KeyboardDidShow(h)}
                             keyboardDidHide={() => this._KeyboardDidHide()}
                             id={this.props.ID}
                             goLoginPage={()=>this.goLoginPage()}
                             refreshComments={() =>this.refreshComments()}
                />
                <BottomShareView
                    shareTitle={ this.state.data.user_name}
                    shareContent={this.state.data.content}
                    shareImageUrl={this.state.data.avatar}
                    shareUrl={'http://xc.xiarikui.cn/Api/Index/share'}
                    ref={(ref) => {this.shareView = ref;}}/>
            </Animated.View>
        )
    }
}

export default QuestionDetailsPage;